/**
 * Created by Administrator on 2019/3/5
 * Function:
 * Desc:
 */
import React, {Component} from 'react';
import {
    Alert,
    Platform,
    StyleSheet,
    Text,
    TouchableHighlight,
    TouchableNativeFeedback,
    TouchableOpacity,
    TouchableWithoutFeedback,
    View
} from 'react-native';


export default class MyButton extends Component {
    // 属性检测
    static propTypes = {};
    // 默认值设置
    static defaultProps = {};

    // 初始化state
    constructor(props) {
        super(props);
        this.state = {};
    }

    _onPressButton() {
        Alert.alert('You tapped the button!')
    }

    _onLongPressButton() {
        Alert.alert('You long-pressed the button!')
    }

    render() {
        return (
            /*TouchableOpacity或是TouchableNativeFeedback组件来定制自己所需要的按钮*/
            <View style={styles.container}>
                {/*背景会在用户手指按下时变暗*/}
                <TouchableHighlight onPress={this._onPressButton} underlayColor="white">
                    <View style={styles.button}>
                        <Text style={styles.buttonText}>TouchableHighlight</Text>
                    </View>
                </TouchableHighlight>
                {/*按下时降低按钮的透明度，而不会改变背景的颜色*/}
                <TouchableOpacity onPress={this._onPressButton}>
                    <View style={styles.button}>
                        <Text style={styles.buttonText}>TouchableOpacity</Text>
                    </View>
                </TouchableOpacity>
                {/*按下时形成类似墨水涟漪的视觉效果*/}
                <TouchableNativeFeedback
                    onPress={this._onPressButton}
                    background={Platform.OS === 'android' ? TouchableNativeFeedback.SelectableBackground() : ''}>
                    <View style={styles.button}>
                        <Text style={styles.buttonText}>TouchableNativeFeedback</Text>
                    </View>
                </TouchableNativeFeedback>
                {/*不显示任何视觉反馈*/}
                <TouchableWithoutFeedback
                    onPress={this._onPressButton}
                >
                    <View style={styles.button}>
                        <Text style={styles.buttonText}>TouchableWithoutFeedback</Text>
                    </View>
                </TouchableWithoutFeedback>
                {/*长按操作，使用onLongPress属性来实现*/}
                <TouchableHighlight onPress={this._onPressButton} onLongPress={this._onLongPressButton}
                                    underlayColor="white">
                    <View style={styles.button}>
                        <Text style={styles.buttonText}>Touchable with Long Press</Text>
                    </View>
                </TouchableHighlight>
            </View>
        );
    }
}

// 构建样式
const styles = StyleSheet.create({
    /*
    * *******    style属性    *******
    * flexDirection        水平：row   竖直：column
    * justifyContent       flex-start、center、flex-end、space-around、space-between以及space-evenly
    * alignItems           flex-start、center、flex-end、stretch。
    * */
    container: {
        paddingTop: 60,
        alignItems: 'center'
    },
    button: {
        marginBottom: 30,
        width: 260,
        alignItems: 'center',
        backgroundColor: '#2196F3'
    },
    buttonText: {
        padding: 20,
        color: 'white'
    }
});
